<template>
	<view>
		<u-navbar :is-back="true" title="">
			<view class="slot-wrap u-flex">
				<view class="body">
					<image src="../../../static/img/acitivity/sousuo.png" class="head-icon"></image>
					<input type="text" placeholder="" class="sou-input" />
				</view>
				<view class="right">
					<text class="head-icon">搜索</text>
				</view>
			</view>
		</u-navbar>
		<view class="sousuo-cont">
			<view class="sousuo-cont-top u-font-30 color5">联系人</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">孙<text class="color-red">丽</text></view>
			</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">孙<text class="color-red">丽</text></view>
			</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">孙<text class="color-red">丽</text></view>
			</view>
		</view>
		<view class="sousuo-cont">
			<view class="sousuo-cont-top u-font-30 color5">群聊</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">群聊】美<text class="color-red">丽</text>的城市</view>
			</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">群聊】靓<text class="color-red">丽</text>人生</view>
			</view>
			<view class="sousuo-cont-list u-flex">
				<image src="../../../static/img/cansai1.png" class="user-tx"></image>
				<view class="sousuo-text">孙<text class="color-red">丽</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.slot-wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	width: 95%;
	.left{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		.dizhi-icon{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.body{
		
		flex: 1;
		border:1px solid #eeeeee;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		height: 60rpx;
		.sou-input{
			margin-bottom: 0;
			padding-left: 20rpx;
		}
	}
	.right{
		margin-left: 10rpx;
		.head-icon{
			margin-left: 20rpx;
		}
	}
	.head-icon{
		width: 40rpx;
		height: 40rpx;
		
	}
}
.sousuo-cont{
	margin-left: 28rpx;
	.sousuo-cont-top{
		padding: 40rpx 0 20rpx;
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 10rpx;
	}
	.sousuo-cont-list{
		padding-top: 15rpx;
		.user-tx{
			width: 72rpx;
			height: 72rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		.sousuo-text{
			padding: 35rpx 0;
			border-bottom: 1px solid #EEEEEE;
			flex: 1;
		}
	}
}
</style>
